<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ImageAddHttp } from "@/utils/index"
 
import type { configType } from "@/types/userInfo.d.ts"
const Props = defineProps<{ config: configType }>()


declare global {
  interface Window {
    iOSNavGoBack?: () => void;
    back?: () => void;
  }
}
const isIos = ref(false)


async function goBack()
  {
    console.log(isIos.value)
    if(!isIos.value)
    {
      if(window.back)
      {
        window.back()
        return
      }
    }else{
      if(window.iOSNavGoBack)
      {
        window.iOSNavGoBack()
        return
      }
    }
  }

  onMounted(async()=>{
    // 判断是否是ios
    isIos.value = /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
  })


</script>
<template>
  <div class="friend-circle">
    <!-- 顶部返回按钮 -->
    <div class="back-button" @click="goBack">
      <!-- <span class="icon">&lt;</span> -->
      <img class="icon" src="@/static/return_row.png" alt="">
    </div>

    <!-- 底部栏 -->
    <div class="footer">
      <div class="avatar_box">
        <span class="text">{{Props.config.admin_name}}</span>
        <div class="icon-box">
          <img :src="ImageAddHttp(Props.config.admin_avatar)" alt="Logo" />
        </div>
      </div>
    </div>
    <img  :src="ImageAddHttp(Props.config.admin_header_bg)"  class="header_bg" alt="">
  </div>
</template>



<style lang="scss" scoped>
.friend-circle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 324px;
  z-index: 1;
  // background: #f5f5f5;
  position: relative;
  .back-button {
    position: absolute;
    top: 36px;
    left: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    // border: 1px dashed #999;
    // border-radius: 50%;
    cursor: pointer;
    z-index: 1;

    .icon {
      width: 35px;
      height: auto;
    }
  }

  .footer {
    position: absolute;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top,  #202020, transparent);
  
    padding: 0 16px;
    bottom: 0;
    z-index: 1;
    .avatar_box{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      bottom: -35px;
      .text {
        font-size: 14px;
        color: #fff;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .icon-box {
        width: 64px;
        height: 64px;
        background: #e00;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
   
  }

  .header_bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
}
</style>
